﻿<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>琴行首页 </title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<!--[if it IE 9]>
	<script src="html5shiv/html5shiv.js"></script>
    <script src="respond/respond.js"></script>
<![end if]-->
		<!--<script src="jq/jquery.min.1.11.js"></script>-->
		<script src="jq/jquery-3.1.1.min.js"></script>
		<script src="jq/jquery.flexslider-min.js"></script>
		<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
	</head>
	<style>
		.spana{
			text-align: center;
			font-size:24px;
			color:#000;
		}
	</style>
	<script>
		<!-- js调用部分begin -->
		$(function() {
			$('.flexslider').flexslider({
				directionNav: true,
				pauseOnAction: false
			});

			//产品列表侧出

			var $mLi = $("#wordBox").children();
			$mLi.mouseover(function() {
				mouse_L(this)
			});
			$mLi.mouseout(function() {
				mouse_m(this)
			});

			function mouse_L(thisLi) {
				$(".set").hide();
				$(thisLi).children(".set").show();
				$mLi.css("background-color", "RGBA(0,0,0,0.8)");
				$(thisLi).css("background-color", "RGBA(0,0,0,0.9)");

			}

			function mouse_m(thisLi) {
				$(thisLi).children(".set").hide();
				$mLi.css("background-color", "RGBA(0,0,0,0.8)");
			}
			//直接显示遮罩效果开始
			$(".con-one").hover(function() {
				$(this).find(".txt-one").show();
			}, function() {
				$(this).find(".txt-one").hide();
			})
			$(".con-two").hover(function() {
				$(this).find(".txt-two").show();
			}, function() {
				$(this).find(".txt-two").hide();
			})
			$(".con-three").hover(function() {
				$(this).find(".txt-three").show();
			}, function() {
				$(this).find(".txt-three").hide();
			})

			//直接显示遮罩效果结束
			//图片放大效果 开始
			$(".imgsContent01").hover(function() {
				$(this).find("#imgCon01").stop().animate({
					"width": 480,
					"height": 670
				});
			}, function() {
				$(this).find("#imgCon01").stop().animate({
					"width": 468,
					"height": 660
				});
			})
			$(".imgsContent02").hover(function() {
				$(this).find("#imgCon03").stop().animate({
					"width": 530,
					"height": 610
				});
			}, function() {
				$(this).find("#imgCon03").stop().animate({
					"width": 520,
					"height": 600
				});
			})
			$(".imgContent02").hover(function() {
				$(this).find("#imgCon02").stop().animate({
					"width": 530,
					"height": 610
				});
			}, function() {
				$(this).find("#imgCon02").stop().animate({
					"width": 520,
					"height": 600
				});
			})

			//图片放大效果 结束
			//图片放大效果伴随蒙版出现 开始
			$(".picsCon01").hover(function() {
				$(this).find(".img01").stop().animate({
					"width": 446,
					"height": 406
				});
				$(this).find(".txt-seven").show();
			}, function() {
				$(this).find(".img01").stop().animate({
					"width": 440,
					"height": 400
				});
				$(this).find(".txt-seven").hide();
			})
			$(".picsCon02").hover(function() {
				$(this).find(".img02").stop().animate({
					"width": 766,
					"height": 406
				});
				$(this).find(".txt-five").show();
			}, function() {
				$(this).find(".img02").stop().animate({
					"width": 760,
					"height": 400
				});
				$(this).find(".txt-five").hide();
			})
			$(".picsCon03").hover(function() {
				$(this).find(".img03").stop().animate({
					"width": 406,
					"height": 506
				});
				$(this).find(".txt-six").show();
			}, function() {
				$(this).find(".img03").stop().animate({
					"width": 400,
					"height": 500
				});
				$(this).find(".txt-six").hide();
			})
			$(".picsCon04").hover(function() {
				$(this).find(".img04").stop().animate({
					"width": 606,
					"height": 406
				});
				$(this).find(".txt-four").show();
			}, function() {
				$(this).find(".img04").stop().animate({
					"width": 600,
					"height": 400
				});
				$(this).find(".txt-four").hide();
			})
		})
	</script>

	<body>
		<!---head--------->
		<div class="header">
			<div class="box">
				<div class="title">
					<!--<img class="images01" src="images/logo01.jpg" alt="这是一张图片">
					<a href="index.html">
						<div>中原琴行首页</div>
					</a>
					<a href="user/login.html">
						<p><span>注册</span></p>
					</a>
					
						<a href="user/login.html">
						<p>登录</p>
					</a>
					<a href="#">
						<p>我的收藏</p>
					</a>
					<a href="orders.html">
						<p><img src="images/logo02.jpg">我的订单</p>
					</a>
					<a href="shopping.html">
						<p><img src="images/logo03.jpg">购物篮</p>
					</a>-->
				</div>
			</div>
			<div class="logoCon">
				<img src="images/logo.jpg" alt="这是一张图片">
				<form><input id="search" type="text"  placeholder="搜商品"><input id="souSuo" type="button" value="搜索"></form>
				<!--<ul class="nav">
					<a >毛呢外套</a>
					<a >短靴</a>
					<a >毛衣</a>
					<a >男士外套</a>
					<a >卫衣</a>
					<a >睡衣</a>
					<a >秋冬套装</a>
					<a >打底裤</a>
					<a >连衣裙</a>
				</ul>-->
			</div>
		</div>

		<!--新品------->
		<a href="#">
			<div class="titleCon">
				<div>推荐商品</div>
				<p>More</p>
			</div>
		</a>
		 <div class="xinPin">
		 	<!--背景图片-->
    	<a href="product.html"><img id="imgs" src="images/2.png"></a>
        <ul class="imgCon">
            <!--<li class="imgContent01">
            	<div class="imgsContent01"><a href="product.html"><img id="imgCon01" src="images/images08.jpg"></a></div>
            	<div class="imgsContent02"><a href="product.html"><img id="imgCon03" src="images/images10.jpg"></a></div>
            </li>
            <li class="imgContent02">
                <a href="product.html"><img id="imgCon02" src="images/images09.jpg"></a>
            </li>-->
        </ul>
    </div>
		<!---分类1---------->
		
		<div class="content02" id="chaxunsuoyou">
			
			<!--<div class="picCon02">
				<div class="picsCon03">
					<a href="product.html"><img class="img03" src="images/6.png"></a>
					<p class="spana">让我出来</p>
				</div>
				
				<div class="picsCon03">
					<a href="product.html"><img class="img03" src="images/images14.jpg"></a>
					<p class="spana">让我出来</p>
				</div>
				<div class="picsCon03">
					<a href="product.html"><img class="img03" src="images/images15.jpg"></a>
					<p class="spana">让我出来</p>
				</div>
			</div>-->
		</div>
		
		<!---foot--------->
		<div>
		<div class="footer01">
			<div class="footerBox">
				<img src="images/logo.jpg" alt="这是一张图片">
				<div class="footerCon01">
					<ul class="foot01">
						<li>
							<a href="#"><span>公司</span></a>
						</li>
						<li>
							<a href="#">关于我们</a>
						</li>
						<li>
							<a href="#">招聘信息</a>
						</li>
						<li>
							<a href="#">联系我们</a>
						</li>
					</ul>
				</div>
				<div class="footerCon02">
					<ul class="foot02">
						<li>
							<a href="#"><span>消费者</span></a>
						</li>
						<li>
							<a href="#">消费者服务</a>
						</li>
						<li>
							<a href="#">意见反馈</a>
						</li>
						<li>
							<a href="#">手机版下载</a>
						</li>
					</ul>
				</div>
				<div class="footerCon03">
					<ul class="foot03">
						<li>
							<a href="#"><span>支付方式</span></a>
						</li>
						<li>
							<a href="#">快捷支付</a>
						</li>
						<li>
							<a href="#">银联支付</a>
						</li>
						<li>
							<a href="#">微信支付</a>
						</li>
					</ul>
				</div>
				<div class="footerCon04">
					<ul class="foot04">
						<li>
							<a href="#"><span>商家服务</span></a>
						</li>
						<li>
							<a href="#">商家入驻</a>
						</li>
						<li>
							<a href="#">商家中心</a>
						</li>
						<li>
							<a href="#">运营服务</a>
						</li>
					</ul>
				</div>
				<div class="footerCon05">
					<ul class="foot05">
						<li>
							<a href="#"><span>手机商城</span></a>
						</li>
					</ul>
					<div class="erWeiMa"></div>
				</div>
			</div>
		</div>
		<div class="footer02">
			<p>营业执照注册号：330106000129004 增值电信业务经营许可证：鲁B2-20110349 网络文化经营许可证：鲁网文（2016）0349-219号 安全责任书 鲁公网安备 33010602002329号——林杨工作室</p>
		</div>
	</div>
	</body>
	<!--<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>-->
	
	<script type="text/javascript">
		
		//var user = sessionStorage.getItem("userInfo")
		
		//获取session中的信息
		$.ajax({
			type:"get",
			url:"http://127.0.0.1/yh/getSession",
			async:true,
			dataType:"json",
			success:function(data){
				
				/*alert("进来了")
				alert(data.userName)*/
				if(data.data==null){
					alert("请先登录")
					window.location.href="user/login.html"
				}else{
					sessionStorage.setItem("userid",data.data.id);
					sessionStorage.setItem("userName",data.data.userName);
					sessionStorage.setItem("phone",data.data.phone);
					sessionStorage.setItem("name",data.data.name);
					var str ='<img class="images01" src="images/logo01.jpg" alt="这是一张图片">'+
					'<a href="index.html">'+
						'<div>琴行首页</div>'+
					'</a>'+
					'<a href="user/login.html">'+
						'<p><span>注册</span></p>'+
					'</a>'+
						'<a href="user.html">'+
						'<p>'+data.data.userName+'</p>'+
					'</a>'+
					'<a href="orders.html">'+
						'<p><img src="images/logo02.jpg">我的订单</p>'+
					'</a>'+
					'<a href="shopping.html">'+
						'<p><img src="images/logo03.jpg">购物篮</p>'+
					'</a>'
					
					$(".title").html(str);
				}
			}
		});
		
		getDate();
		
		$("#souSuo").click(function(){
			//alert("点到搜索了");
			getDate();
		})
		
		
		
		
		
		//推荐的商品
		$.ajax({
			type:"get",
			url:"http://127.0.0.1/yh/selectAllRecommend_guitar",
			async:true,
			dataType:"json",
			success:function(data){
				if(data.code==0){
					var str =   '<li class="imgContent01">'+
            						'<div class="imgsContent01"><a href="product.html?id='+data.data[0].id+'='+1+'"><img id="imgCon01" src="'+data.data[0].photo+'"></a></div>'+
            						'<div class="imgsContent02"><a href="product.html?id='+data.data[1].id+'='+1+'"><img id="imgCon03" src="'+data.data[1].photo+'"></a></div>'+
            					'</li>'+
            					'<li class="imgContent02">'+
                					'<a href="product.html?id='+data.data[2].id+'='+1+'"><img id="imgCon02" src="'+data.data[2].photo+'"></a>'+
            					'</li>';
            		$(".imgCon").html(str);
				}
			}
		});
		
		
		
		
		//展示所有商品的方法
		function getDate(){
			$.ajax({
				type:"get",
				url:"http://127.0.0.1/yh/selectGuitarInfoAll",
				async:true,
				data:{"name":$("#search").val()},
				dataType:"json",
				success:function(data){
					if(data.code==0){
						//alert("进来了");
						var count = data.data.length;
						//alert(count);
						if(count==0){
							alert("没有您搜索的关键字，请重新搜索")
						}
						//alert(data.data[count-1].photo);
						//alert(count/3);
						if(count/3>=1){
							var str0 = "";
							for (var i = 0; i < parseInt(count/3); i++) {
								str0 += '<div class="picCon02">'+
											'<div class="picsCon03">'+
												'<a href="product.html?id='+data.data[(i+1)*3-3].id+'='+0+'"><img class="img03" src="'+data.data[(i+1)*3-3].photo+'"></a>'+
												'<p class="spana">'+data.data[(i+1)*3-3].name+'</p>'+
											'</div>'+										
											'<div class="picsCon03">'+
												'<a href="product.html?id='+data.data[(i+1)*3-2].id+'='+0+'"><img class="img03" src="'+data.data[(i+1)*3-2].photo+'"></a>'+
												'<p class="spana">'+data.data[(i+1)*3-2].name+'</p>'+
											'</div>'+
											'<div class="picsCon03">'+
												'<a href="product.html?id='+data.data[(i+1)*3-1].id+'='+0+'"><img class="img03" src="'+data.data[(i+1)*3-1].photo+'"></a>'+
												'<p class="spana">'+data.data[(i+1)*3-1].name+'</p>'+
											'</div>'+
										'</div> '
							}
							if(count%3==1&&count/3!=1){
								str0 += '<div class="picCon02">'+
											'<div class="picsCon03">'+
												'<a href="product.html?id='+data.data[count-1].id+'='+0+'"><img class="img03" src="'+data.data[(count-1)].photo+'"></a>'+
												'<p class="spana">'+data.data[count-1].name+'</p>'+
											'</div>'+										
										'</div> ';
							}else if(count%3==2&&count/3!=1){
								str0 += '<div class="picCon02">'+
											'<div class="picsCon03">'+
												'<a href="product.html?id='+data.data[count-2].id+'='+0+'"><img class="img03" src="'+data.data[count-2].photo+'"></a>'+
												'<p class="spana">'+data.data[count-2].name+'</p>'+
											'</div>'+										
											'<div class="picsCon03">'+
												'<a href="product.html?id='+data.data[count-1].id+'='+0+'"><img class="img03" src="'+data.data[count-1].photo+'"></a>'+
												'<p class="spana">'+data.data[count-1].name+'</p>'+
											'</div>'
										'</div> ';
							}
							
							$("#chaxunsuoyou").html(str0);
						}else {
							if(count%3==1){
								var str1 = '<div class="picCon02">'+
											'<div class="picsCon03">'+
												'<a href="product.html?id='+data.data[count-1].id+'='+0+'"><img class="img03" src="'+data.data[count-1].photo+'"></a>'+
												'<p class="spana">'+data.data[count-1].name+'</p>'+
											'</div>'+										
										'</div> ';
										
								$("#chaxunsuoyou").html(str1);			
										
							}else if(count%3==2){
								var str2 = '<div class="picCon02">'+
											'<div class="picsCon03">'+
												'<a href="product.html?id='+data.data[count-2].id+'='+0+'"><img class="img03" src="'+data.data[count-2].photo+'"></a>'+
												'<p class="spana">'+data.data[count-2].name+'</p>'+
											'</div>'+										
											'<div class="picsCon03">'+
												'<a href="product.html?id='+data.data[count-1].id+'='+0+'"><img class="img03" src="'+data.data[count-1].photo+'"></a>'+
												'<p class="spana">'+data.data[count-1].name+'</p>'+
											'</div>'
										'</div> ';
										
								$("#chaxunsuoyou").html(str2);		
										
							}
							
						}
					}
				}
				
			});
		}
		
	</script>

</html>